<%@page import="java.sql.*"%>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>成语接龙版本1</title>
<style type="text/css">
h1{ color: red;}
.kuang{ padding: 20px;}
.content{ border: 1px solid gray; border-radius: 20px; margin-bottom: 10px; padding: 20px;}
input,button { border-radius: 6px; outline: none; padding: 6px;}
.msg{ color: red; font-weight:bold; margin-bottom: 10px}
form{ display: inline;}
.history>p:nth-child(even){ color: red; font-weight: bold;}
</style>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");//设置请求体数据解码时采用的编码格式，若不设置则默认为ISO-8859-1编码格式（仅post方法需要设置）
String cy = request.getParameter("chengyu");//不管是get还是post，都可以通过该方法来获取传递过来的参数
String history = request.getParameter("history");//("提交的表单元素name的值")
if(history==null)history="";
boolean isChengyu = false;//是否为成语?默认为否
boolean isUserWin=false;//用户是否战胜了计算机?默认为否
String first = null;//成语的首字母
String msg = null;//提示信息
if(cy!=null){//判断成语是否为空，若用户输入则不为空，则执行下面代码
	cy = cy.trim();//去掉成语前后的空格
	String url="jdbc:mysql://localhost:3306/db?serverTimezone=PRC";
	Class.forName("com.mysql.cj.jdbc.Driver");
	Connection cn = DriverManager.getConnection(url,"root","12qwas");
	PreparedStatement ps = cn.prepareStatement("select cy from chengyu where cy=?");
	ps.setString(1, cy);
	ResultSet rs=ps.executeQuery();
	isChengyu = rs.next();
	if(isChengyu){
		history=history+" / "+cy;
		first=cy.substring(cy.length()-1);
		ps = cn.prepareStatement("select cy from chengyu where first=? order by rand() limit 1");
		ps.setString(1, first);
		rs=ps.executeQuery();
		if(rs.next()){
			cy=rs.getString(1);
			history=history+" / "+cy;
			first=cy.substring(cy.length()-1);
		}else{
			msg="恭喜你，在成语接龙大战中战胜了计算机~";
			isUserWin=true;
		}
	}else{
		msg="您输入的“"+cy+"”不是成语，请重新输入~";
		first=cy.substring(0,1);
	}
	rs.close();
	ps.close();
	cn.close();
}
out.print(history+"<hr/>");
%>
<div class='kuang'>
	<div class='content'>
		<h1>人机大战之成语接龙</h1>
		<div class='history'>
			<%
			String[]cys=history.split(" / ");
			for(int i=1;i<cys.length;++i){
				out.println("<p>"+i+".["+(i%2==0?'机':'人')+"]"+cys[i]+"</p>");
			}
			%>
		</div>
	</div>
	<form method='post' accept-charset="utf-8">
		<div class='msg'><%= msg==null?"":msg %></div>
		<input name='chengyu'<%=isUserWin?" disabled":"" %> />
		<input name='history' type='hidden' value='<%= history==null?"":history %>'/>
		<button<%=isUserWin?" disabled":"" %> onclick='return check()'>接龙</button>
		<!-- <button onclick='location.href="";return false'>重新开始</button> -->
		<!-- <input type='button' value='重新开始' onclick='location.href=""'> -->
	</form>
	<button onclick='location.href=""'>再来一局</button>
</div>
<script type="text/javascript">
function check() {
	let first='<%= history.isEmpty()?"":first %>'
	let msg=null
	let cy=document.querySelector('input[name="chengyu"]').value.trim()
	if(cy.startsWith(first)){
		if(cy.length>=3 && length<=14)return true
		msg='请输入字数在3个到14个范围内的成语~'
	}else{
		msg='你输入的“'+cy+'”违反了成语接龙的规则，应该以“'+first+'”开头~'
	}
	document.querySelector('.msg').innerText=msg
	return false
}
</script>
</body>
</html>